<template>
  <div class="box">
    <Top></Top>
    <div class="banner">
      <img src="../assets/APPkaifa.png" />
    </div>
    <div class="bodys">
      <div class="app">
        <h1>APP案例</h1>
        <p class="spans">
          <a href>查看更多>></a>
        </p>
        <div class="swpimg">
          <div class="swpimgs" v-for="swp in swps" :key="swp.id" @mousemove="al(swp.tex)">
            <dl>
              <dt>
                <img :src="swp.img" />
              </dt>
              <dd v-show="text==swp.tex">{{swp.text}}</dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="dashuju"></div>
      <div class="zdys">
        <div class="zdtext" v-for="zdy in zdys" :key="zdy.id">
          <p class="h">{{zdy.hed}}</p>
          <p>{{zdy.heds}}</p>
        </div>

        <div class="sjdl">
          <dl
            v-for="sjd in sjds"
            :key="sjd.id"
            @mousemove="bls(sjd.blues)"
            @mouseout="blt(sjd.blues)"
            :class="blues==sjd.blues?'sjdsh':''"
          >
            <dt>
              <p>
                <img :src="sjd.imgs" v-show="blues==sjd.blues" />
                <img :src="sjd.img" v-show="blues!==sjd.blues" />
              </p>
            </dt>
            <dd>{{sjd.texta}}</dd>
          </dl>
        </div>
      </div>
    </div>
    <Bott></Bott>
  </div>
</template>

<script>
import Top from "@/components/top.vue";
import Bott from "@/components/bott.vue";
export default {
  components: { Top, Bott },
  data() {
    return {
      text: 0,
      blues: 0,
      swps: [
        {
          tex: 1,
          img: require("../assets/anli1.png"),
          text: "我显示咯我显示咯我显示咯我显示咯"
        },
        {
          tex: 2,
          img: require("../assets/anll2.png"),
          text: "我显示咯我显示咯我显示咯我显示咯"
        },
        {
          tex: 3,
          img: require("../assets/al4.png"),
          text: "我显示咯我显示咯我显示咯我显示咯"
        }
      ],
      zdys: [
        {
          hed: "制定优势",
          heds: "让您的企业更高效地完成工作"
        }
      ],
      sjds: [
        {
          blues: 1,
          img: require("../assets/huise.png"),
          imgs: require("../assets/blue.png"),
          texta:
            "每一个软件开发都经过系统的分析，针对不同企业情况良定做的，大提高企业的工作效率"
        },
        {
          blues: 2,
          img: require("../assets/huise.png"),
          imgs: require("../assets/blue.png"),
          texta:
            "每一个软件开发都经过系统的分析，针对不同企业情况良定做的，大提高企业的工作效率"
        },
        {
          blues: 3,
          img: require("../assets/huise.png"),
          imgs: require("../assets/blue.png"),
          texta:
            "每一个软件开发都经过系统的分析，针对不同企业情况良定做的，大提高企业的工作效率"
        }
      ]
    };
  },
  methods: {
    al(text) {
      this.text = text;
    },
    bls(blues) {
      this.blues = blues;
      // console.log(blues)
    },
    blt() {
      this.blues = 0;
    }
  }
};
</script>

<style>
</style>